import Vue from 'vue';
import App from './App.vue';
import router from './router';
import VueResource from 'vue-resource'; //请求数据
import VueRouter from 'vue-router';

Vue.config.productionTip = false;
Vue.use(VueResource);
Vue.use(VueRouter);

//自定义全局指令,钩子函数,设置颜色
Vue.directive('rainbow', {
  bind(el, binding, vnode) {
    //拼接一个彩虹色（element获取元素）;可以生成6位数的16进制随机数
    el.style.color = '#' + Math.random().toString(16).slice(2, 8);
  },
});
//自定义指令，设置盒子宽度(初始是800px),theme使用时必须用''包裹
Vue.directive('theme', {
  bind(el, binding, vnode) {
    if (binding.value == 'wide') {
      el.style.maxWidth = '1260px';
    } else if (binding.value == 'narrow') {
      //窄的时候宽560px
      el.style.maxWidth = '560px';
    } //如果有column添加背景色
    if (binding.arg == 'column') {
      el.style.background = '#6677cc';
      el.style.padding = '20px';
    }
  },
});

//自定义全局过滤器(过滤器名,函数名)
// Vue.filter('touppercase', function (value) {
//   //value接收|左边的值blog.title
//   return value.toUpperCase();
// });
Vue.filter('snippet', function (value) {
  return value.slice(0, 100) + '...';
});

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');
